$(function() {
    var myChart = echarts.init(document.getElementById('echarts1'));

    // function randomData() {
    //     return Math.round(Math.random() * 1000);
    // }
    option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params, ticket, callback) {
                var res = params.name + '<br/>';
                res += '金额：' + params.value + '万元<br/>';
                res += '单数：' + params.data.count + '单<br/>';
                res += '条目数：' + params.data.number + '条<br/>';
                setTimeout(function() { callback(ticket, res); }, 1000);
                return res;
            }
        },
        // legend: {
        //     orient: 'vertical',
        //     x: 'left',
        //     data: ['订单量']
        // },
        dataRange: {
            x: 'left',
            y: 'bottom',
            splitList: [
                { start: 0, end: 100 },
                { start: 101, end: 200 },
                { start: 201, end: 300 },
                { start: 301, end: 400 },
                { start: 401, end: 500 },
                { start: 501 }
            ],
            color: ['#378c39', '#42b260', '#8cc76d', '#b5d7a4', '#cde4c2', '#e6f0e6']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            right: '20',
            y: 'top',
            feature: {
                // mark: { show: true },
                // dataView: { show: true, readOnly: false },
                // restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series: [{
            name: '',
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        // textStyle: {
                        //     color: "rgb(249, 249, 249)"
                        // }
                    }
                },
                emphasis: { label: { show: true } }
            },
            data: [
                { name: '北京', value: 50, count: 50, number: 20 },
                { name: '天津', value: 500, count: 50, number: 20 },
                { name: '上海', value: 305, count: 50, number: 20 },
                { name: '重庆', value: 206, count: 50, number: 20 },
                { name: '河北', value: 52, count: 50, number: 20 },
                { name: '河南', value: 214, count: 50, number: 20 },
                { name: '云南', value: 152, count: 50, number: 20 },
                { name: '辽宁', value: 200, count: 50, number: 20 },
                { name: '黑龙江', value: 200, count: 50, number: 20 },
                { name: '湖南', value: 326, count: 50, number: 20 },
                { name: '安徽', value: 85, count: 50, number: 20 },
                { name: '山东', value: 26, count: 50, number: 20 },
                { name: '新疆', value: 265, count: 50, number: 20 },
                { name: '江苏', value: 300, count: 50, number: 20 },
                { name: '浙江', value: 426, count: 50, number: 20 },
                { name: '江西', value: 109, count: 50, number: 20 },
                { name: '湖北', value: 123, count: 50, number: 20 },
                { name: '广西', value: 269, count: 50, number: 20 },
                { name: '甘肃', value: 423, count: 50, number: 20 },
                { name: '山西', value: 369, count: 50, number: 20 },
                { name: '内蒙古', value: 503, count: 50, number: 20 },
                { name: '陕西', value: 69, count: 50, number: 20 },
                { name: '吉林', value: 80, count: 50, number: 20 },
                { name: '福建', value: 102, count: 50, number: 20 },
                { name: '贵州', value: 720, count: 50, number: 20 },
                { name: '广东', value: 496, count: 50, number: 20 },
                { name: '青海', value: 386, count: 50, number: 20 },
                { name: '西藏', value: 652, count: 50, number: 20 },
                { name: '四川', value: 520, count: 50, number: 20 },
                { name: '宁夏', value: 489, count: 50, number: 20 },
                { name: '海南', value: 269, count: 50, number: 20 },
                { name: '台湾', value: 200, count: 50, number: 20 },
                { name: '香港', value: 309, count: 50, number: 20 },
                { name: '澳门', value: 503, count: 50, number: 20 }
            ]
        }]
    };
    myChart.setOption(option);

    // 选项卡
    $('.fheader .kcfx_btn a').each(function(index, value) {
        $(value).addClass("a" + index)
    });

    $(".fheader .kcfx_btn a").click(function() {
        $(this).addClass('on').siblings().removeClass('on');

        var index = $(this).index();
        number = index;
        $('.kcfx_echart').addClass('hide');
        $('.kcfx_echart:eq(' + index + ')').removeClass('hide');

        if (index == 1 && isLoadedChart3 == false) {
            showChart3();
        }
    });

    var isLoadedChart3 = false;

    function showChart3() {
        isLoadedChart3 = true;
        var myChart3 = echarts.init(document.getElementById('echarts3'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                formatter: '{b} <br /> {a} : {c}万元'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                right: '20',
                y: 'top',
                feature: {
                    // mark: { show: true },
                    // dataView: { show: true, readOnly: false },
                    // restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                // boundaryGap: [0, 0.01],
                //最小是多少，最大是多少，默认一次增加多少
                min: 0,
                max: 800,
                interval: 100,
                //下面是显示格式化，一般来说还是用的上的
                axisLabel: {
                    formatter: '{value} 万元'
                }
            },
            yAxis: {
                type: 'category',
                data: ['上海市', '北京市', '湖北省', '广东省', '西藏']
            },
            series: [{
                name: '库存总额',
                type: 'bar',
                data: [340, 340, 430, 690, 106],
                barWidth: 36,
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        formatter: '{c}万元'
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#9bd100', '#00aaeb', '#ff9e3e', '#ff2849', '#ffc900'
                            ];
                            return colorList[params.dataIndex]
                        }
                    }
                },
            }]
        };
        myChart3.setOption(option);

    };

    var myChart2 = echarts.init(document.getElementById('echarts2'));
    option = {
        tooltip: {
            trigger: 'axis',
            // formatter: '{c}元',
            // borderRadius: 8,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['广东省', '西藏', '上海市', '北京市', '湖北省']
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true,
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        yAxis: {
            type: 'value',
            //最小是多少，最大是多少，默认一次增加多少
            // min: 0,
            // max: 1000,
            // interval: 200,
            //下面是显示格式化，一般来说还是用的上的
            axisLabel: {
                formatter: '{value} 万元'
            }
        },
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07', '09-08', '09-09', '09-10', '09-11', '09-12']
        },
        series: [{
            name: '广东省',
            type: 'line',
            stack: '总量',
            symbolSize: 5, //图标尺寸
            symbol: 'circle',
            data: [100, 110, 116, 125, 132, 139, 230, 240, 190, 340, 240, 200],
            itemStyle: {
                normal: {
                    color: "#ff2948" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#ff2948" //连线颜色
                }
            },
        }, {
            name: '西藏',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [90, 100, 106, 115, 122, 129, 220, 230, 180, 330, 230, 190],
            itemStyle: {
                normal: {
                    color: "#ffc900" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#ffc900" //连线颜色
                }
            },
        }, {
            name: '上海市',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [80, 90, 96, 105, 112, 119, 210, 220, 170, 320, 220, 180],
            itemStyle: {
                normal: {
                    color: "#9ad100" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#9ad100" //连线颜色
                }
            },
        }, {
            name: '北京市',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [70, 80, 86, 95, 102, 109, 200, 210, 160, 310, 210, 170],
            itemStyle: {
                normal: {
                    color: "#00aaeb" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#00aaeb" //连线颜色
                }
            },
        }, {
            name: '湖北省',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [60, 70, 76, 85, 92, 99, 190, 200, 150, 300, 200, 160],
            itemStyle: {
                normal: {
                    color: "#ff9e3e" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#ff9e3e" //连线颜色
                }
            },
        }]
    };
    myChart2.setOption(option);
})